<template>
	<div class="UserManage">

		<el-row type="flex" class="row-bg" justify="space-between">

			<!-- 查询输入框 -->
			<el-col :span="22">

				<el-form :inline="true" :model="userTable" class="demo-form-inline" size="small">

					<el-form-item label="用户名字" prop="userName">
						<el-input v-model="userTable.userName" placeholder="用户名字" clearable></el-input>
					</el-form-item>

					<el-form-item label="用户类型" prop="userType">
						<el-input v-model="userTable.userType" placeholder="用户类型" clearable></el-input>
					</el-form-item>

                    <el-form-item label="用户账户" prop="userAccount">
						<el-input v-model="userTable.userAccount" placeholder="用户类型" clearable></el-input>
					</el-form-item>

                    <el-form-item label="用户状态" prop="userState">
						<el-input v-model="userTable.userState" placeholder="用户类型" clearable></el-input>
					</el-form-item>

                    <el-form-item label="添加时间" prop="createdTime">
						<el-input v-model="userTable.createdTime" placeholder="用户类型" clearable></el-input>
					</el-form-item>

					

					<el-form-item>
						<el-button size="small" type="primary" @click="search">查询</el-button>
					</el-form-item>

				</el-form>
			</el-col>

			<!-- 增加管理员按钮 -->
			<el-col :span="2">
				<el-button type="primary" plain style="position:absolute;right:0" @click="dialogFormVisible = true" size="small">添加管理员</el-button>
			</el-col>
		</el-row>

		<!-- 表格 -->
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="userName" label="用户姓名" >
			</el-table-column>
			<el-table-column prop="userType" label="用户类型" >
			</el-table-column>
			<el-table-column prop="userAccount" label="用户账户">
			</el-table-column>
			<el-table-column prop="userState" label="用户状态" >
                 <template slot-scope="scope">
                    <!-- {{scope.row.userState}} -->
                    {{scope.row.userState==="1"?`启用`:`禁用`}}
                </template>
			</el-table-column>
			<el-table-column prop="createdTime" label="添加时间" >
                 <template slot-scope="scope">
                    {{scope.row.createdTime|dateFormat("yyyy-MM-dd hh:mm:ss.S")}}
                </template>
			</el-table-column>

			<!-- 功能区域 -->
			<el-table-column label="操作">

				<template slot-scope="scope">


					<!-- 编辑用户名 -->
					<el-button size="small" type="primary" @click="openEditName(scope.$index, scope.row)">编辑</el-button>

                    <!-- 启用/禁用按钮 -->
					<el-button size="small" :type="scope.row.userState==2?'success':'danger'" @click="toggleStatus(scope.$index, scope.row)">{{scope.row.userState==2?"启用":"禁用"}}</el-button>

                    <!-- 重置密码按钮 -->
					<!-- <el-button size="small" type="danger" @click="resetPwd(scope.$index, scope.row)">删除</el-button> -->

				</template>

			</el-table-column>
		</el-table>

		<!-- 添加管理员 -->
		<el-dialog title="添加管理员" :visible.sync="dialogFormVisible" width="80%">
			<el-row>
				<el-col :span="8" :offset="6">
					<el-form :model="userData" status-icon :rules="userNameRules" ref="userNameRef">

						<el-form-item label="用户姓名" prop="userName">
							<el-input v-model="userData.userName" clearable></el-input>
						</el-form-item>

                        <el-form-item label="用户类型" prop="userType">
							<el-input v-model="userData.userType" clearable></el-input>
						</el-form-item>

                        <el-form-item label="用户账户" prop="userAccount">
							<el-input v-model="userData.userAccount" clearable></el-input>
						</el-form-item>

                        <el-form-item label="用户状态" prop="userState">
							<el-input v-model="userData.userState" clearable></el-input>
						</el-form-item>


					</el-form>
				</el-col>
			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addManage">确认</el-button>
			</div>
		</el-dialog>

		<!-- 编辑用户信息 -->
		<el-dialog title="编辑用户名" :visible.sync="dialogFormVisibleEditName" width="80%">
			<el-row>
				<el-col :span="8" :offset="6">
					<el-form :model="editName" status-icon :rules="editNameRules" ref="editNameRef">
						

                        	<el-form-item label="用户姓名" prop="userName">
							<el-input v-model="editName.userName" clearable></el-input>
						</el-form-item>

                        <el-form-item label="用户类型" prop="userType">
							<el-input v-model="editName.userType" clearable></el-input>
						</el-form-item>

                        <el-form-item label="用户账户" prop="userAccount">
							<el-input v-model="editName.userAccount" clearable></el-input>
						</el-form-item>

                        <el-form-item label="用户状态" prop="userState">
							<el-input v-model="editName.userState" clearable></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleEditName = false">取 消</el-button>
				<el-button type="primary" @click="startEditName">确认</el-button>
			</div>
		</el-dialog>

		<!-- 分页控件 -->
		<el-row :gutter="20" class="paging">
			<el-col :span="6" :offset="10">
				<el-pagination background layout="prev, pager, next" :total="countPage" @current-change="handleCurrentChange" :current-page.sync="pageIndex">
				</el-pagination>
			</el-col>
		</el-row>

	</div>
</template>

<script>
import * as API from "../http/api";
import * as filters from "../util/filters.js";
export default {
  data() {
    return {
      // 默认查询表单的字段
      userTable: {
        userName: null,
        userType: null,
        userAccount: null,
        userState: null,
        createdTime: null,
        pageIndex: 1,
        pageSize: 20
      },
      // 默认添加管理员的字段
      userData: {
        userName: null,
        userType: null,
        userAccount: null,
        userState: null
      },
      userNameRules: {
        name: {
          required: true,
          message: "用户名不能为空",
          trigger: "blur"
        }
      },
      // 更改用户名
      editName: {
        userName: null,
        userType: null,
        userAccount: null,
        userState: null,
        createdTime: null
      },

      editNameRules: {
        name: {
          required: true,
          message: "用户名不能为空",
          trigger: "blur"
        }
      },
      countPage: 100, //默认分页总数
      dialogFormVisible: false, //是否弹出增加管理员弹框
      dialogFormVisibleEditName: false, //是否弹出修改用户名的弹框

      editNameData: [], //传递给修改用户名的数据

      pageIndex: 1, //默认请求的页码数据
      pageNum: 20, //默认每页的数量
      tableData: [] //表格中的数据
    };
  },
  created() {
    this.token = JSON.parse(window.sessionStorage.getItem("toekn"));
    this.searchUser();
  },
  methods: {
    // 点击查询
    search() {
      let self = this;
      // 当前页面回归到一
      self.pageIndex = 1;
      self.searchUser();
    },
    // 查询数据
    searchUser() {
      let self = this;
      self
        .$axios({
          method: "get",
          url: API.queryUser,
          params: {
            userName: self.userTable.userName,
            userType: self.userTable.userType,
            userAccount: self.userTable.userAccount,
            userState: self.userTable.userState,
            createdTime: self.userTable.createdTime,
            pageIndex: self.pageIndex,
            pageSize: self.pageNum
          },
          customErr: false
        })
        .then(res => {
          console.log(res);
          self.tableData = res.result;
          self.countPage = res.countPage * 10;
        });
    },
    // 切换页码
    handleCurrentChange(val) {
      let self = this;
      // 设置显示当前页码
      self.pageIndex = val;
      self.searchUser();
    },
    // 重置密码
    resetPwd(index, value) {
      let self = this;

      // 弹框提示
      this.$confirm("此操作将重置密码为:123456,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置"
          });
        });
    },
    // 切换状态（启用/禁用）
    toggleStatus(index, value) {
      let self = this;
      let status = "";
      status = value.status == 0 ? "启用" : "禁用";

      this.$confirm(`此操作将${status}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          self
            .$axios({
              method: "get",
              url: API.updateUser,
              params: {
                userState: value.userState === `1` ? `2` : `1`,
                createdTime: value.createdTime
              },
              customErr: false
            })
            .then(res => {
              this.$message({
                showClose: true,
                message: "编辑管理员成功",
                type: "success"
              });

              // self.userName.name = "";

              // 关闭弹窗
              self.dialogFormVisibleEditName = false;
              // 刷新页面数据
              self.searchUser();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },

    // 添加管理员
    addManage() {
      let self = this;

      this.$refs["userNameRef"].validate(valid => {
        if (valid) {
          self
            .$axios({
              method: "get",
              url: API.addUser,
              params: {
                userName: self.userData.userName,
                userType: self.userData.userType,
                userAccount: self.userData.userAccount,
                userState: self.userData.userState
              },
              customErr: false
            })
            .then(res => {
              this.$message({
                showClose: true,
                message: "添加管理员成功",
                type: "success"
              });

              // 重置表单为初始值
              this.$refs["userNameRef"].resetFields();

              // self.userName.name = "";

              // 关闭弹窗
              self.dialogFormVisible = false;
              // 刷新页面数据
              self.searchUser();
            });
        } else {
          return false;
        }
      });
    },

    // 打开弹框（编辑）
    openEditName(index, value) {
      let self = this;
      self.dialogFormVisibleEditName = true;
      self.editNameData.value = value;
      self.editNameData.index = index;

      self.editName.userName = value.userName;
      self.editName.userType = value.userType;
      self.editName.userAccount = value.userAccount;
      self.editName.userState = value.userState;
      self.editName.createdTime = value.createdTime;
    },

    // 编辑管理员
    startEditName(index, value) {
      let self = this;

      this.$refs["editNameRef"].validate(valid => {
        if (valid) {
          self
            .$axios({
              method: "get",
              url: API.updateUser,
              params: {
                userName: self.editName.userName,
                userType: self.editName.userType,
                userAccount: self.editName.userAccount,
                userState: self.editName.userState,
                createdTime: self.editName.createdTime
              },
              customErr: false
            })
            .then(res => {
              this.$message({
                showClose: true,
                message: "编辑管理员成功",
                type: "success"
              });

              // self.userName.name = "";

              // 关闭弹窗
              self.dialogFormVisibleEditName = false;
              // 刷新页面数据
              self.searchUser();
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.UserManage {
  .paging {
    margin-top: 10px;
  }
}
</style>
